@baseColor: #3E758E;
@baseDarkColor: #31505f;
@cubicColor: rgba(123, 180, 192, 0.411);
@testColor: rgb(207, 207, 207);
@btnLeft: 45%;
@leftRatio: 0.55;
@boxWidth: 645px;
@boxHeight: 75px;
@transit01: all 0.6s ease-in-out;

body {
    background-color: @testColor;
}

// 摄像布置
.searchBox {
    perspective: 750px;
    width: @boxWidth;
    height: (@boxHeight * 1.5);
    box-sizing: border-box;
    margin: 200px auto 100px;
    padding: 0 10px;
}

// 元素盒子
.box3d-01 {
    position: relative;
    left: 20%;
    transform-style: preserve-3d;
    transition: @transit01;

    // 统一按钮
    .btn {
        position: absolute;
        top: 50%;
        left: @btnLeft;
        width: ( @boxHeight - 3);
        height: ( @boxHeight - 2);
        background-color: @baseColor;
        text-align: center;
        line-height: ( @boxHeight - 3);
        font-size: ( @boxHeight / 2);
        color: #fff;
        transition: @transit01;
        cursor: pointer;

        &:hover {
            background-color: @baseDarkColor;
        }
    }

    // 中心部分
    .mid {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 2px;

        .search-content {
            position: absolute;
            top: 1px;
            left: 0;
            height: (@boxHeight - 8);
            // width: (@boxWidth - @boxHeight + 3);
            width: ((@boxWidth - @boxHeight + 3) * @leftRatio);
            background-color: rgba(231, 231, 231, 0.699);
            transition: @transit01;
        
            input {
                height: 100%;
                width: 100%;
                background-color: transparent;
                padding: 0 24px;
                outline: none;
                border: none;
                font-size: 24px;
                box-sizing: border-box;
                color: black;
            }
        }

        .btn {
            height: ( @boxHeight - 8);
        }
    }

    // 包装盒子
    .front,
    .back,
    .top,
    .bottom {
        position: absolute;
        top: 0;
        left: 0;
        // width: (@boxWidth - @boxHeight + 3);
        width: ((@boxWidth - @boxHeight + 3) * @leftRatio);
        height: (@boxHeight - 3);
        background-color: @cubicColor;
        transition: @transit01;
    }

    .front,
    .search-cube-front {
        transform: translateZ((@boxHeight / 2));
    }

    .back,
    .search-cube-back {
        transform: translateZ(-(@boxHeight / 2));
    }

    .top,
    .search-cube-top {
        transform: translateY(-(@boxHeight / 2 - 3)) rotateX(90deg);
    }

    .bottom,
    .search-cube-bottom {
        transform: translateY((@boxHeight / 2 - 3)) rotateX(-90deg);
    }

    .search-cube-left {
        transform: translateX(-(@boxHeight / 2 - 2)) rotateY(-90deg);
    }

    // 滑动搜索方块
    .search-cube {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
    }

}

@keyframes rotating {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotateX(360deg);
    }
}

.box3d-01:hover { 
    left: 0;
    transform: rotateY(-20deg) translate3D(-45px, 45px, 0) rotateX(-36deg);

    .back {
        transform: translateZ(-(@boxHeight / 2));
    }

    .mid .search-content {
        animation: rotating 2s linear infinite;
        width: (@boxWidth - @boxHeight + 3);
    }

    .mid .btn {
        top: 0;
        left: (@boxWidth - ( @boxHeight - 3));
        animation: rotating 2s linear infinite;
    }

    .search-cube .btn {
        top: 0;
        left: (@boxWidth - ( @boxHeight - 3));
    }

    .front,
    .back,
    .top,
    .bottom {
        width: (@boxWidth - @boxHeight + 3);
    }
}


